<template>
  <div class="mc-markdown-card" v-html="renderedContent"></div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  content: string
}

const props = defineProps<Props>()

// 简单的 Markdown 渲染函数
const renderedContent = computed(() => {
  return props.content
    // 标题
    .replace(/### (.*?)(?=\n|$)/g, '<h3>$1</h3>')
    .replace(/## (.*?)(?=\n|$)/g, '<h2>$1</h2>')
    .replace(/^# (.*?)(?=\n|$)/g, '<h1>$1</h1>')
    
    // 粗体和斜体
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.*?)\*/g, '<em>$1</em>')
    
    // 代码块
    .replace(/`([^`]+)`/g, '<code>$1</code>')
    
    // 有序列表
    .replace(/^(\d+)\. (.*?)(?=\n|$)/gm, '<li class="ordered-item" data-number="$1">$2</li>')
    .replace(/(<li class="ordered-item"[^>]*>.*?<\/li>)/gs, '<ol>$1</ol>')
    
    // 无序列表
    .replace(/^- (.*?)(?=\n|$)/gm, '<li>$1</li>')
    .replace(/(<li>.*?<\/li>)/gs, function(match) {
      // 避免重复包裹
      if (!match.includes('<ol>')) {
        return '<ul>' + match + '</ul>';
      }
      return match;
    })
    
    // 链接
    .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>')
    
    // 换行
    .replace(/\n/g, '<br>')
})
</script>

<style scoped>
.mc-markdown-card {
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  font-size: 14px;
  line-height: 1.7;
  color: #1f2937;
  overflow: hidden;
}

.mc-markdown-card :deep(h1) {
  font-size: 24px;
  color: #111827;
  margin: 0 0 16px 0;
  font-weight: 600;
}

.mc-markdown-card :deep(h2) {
  font-size: 20px;
  color: #111827;
  margin: 20px 0 12px 0;
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 2px solid #e5e7eb;
}

.mc-markdown-card :deep(h3) {
  font-size: 16px;
  color: #111827;
  margin: 16px 0 8px 0;
  font-weight: 600;
}

.mc-markdown-card :deep(strong) {
  color: #059669;
  font-weight: 600;
}

.mc-markdown-card :deep(em) {
  font-style: italic;
  color: #6b7280;
}

.mc-markdown-card :deep(code) {
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  color: #e11d48;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.mc-markdown-card :deep(ol),
.mc-markdown-card :deep(ul) {
  margin: 12px 0;
  padding-left: 24px;
}

.mc-markdown-card :deep(li) {
  margin-bottom: 8px;
}

.mc-markdown-card :deep(a) {
  color: #667eea;
  text-decoration: none;
  transition: color 0.2s;
}

.mc-markdown-card :deep(a:hover) {
  color: #764ba2;
  text-decoration: underline;
}

/* 有序列表自定义样式 */
.mc-markdown-card :deep(.ordered-item::marker) {
  color: #667eea;
  font-weight: 600;
}
</style>